<template>
  <div class="home-nav">
    <nav-button v-for="(item,index) in data" :key="`${item.name}-${index}`" @click="goto(item)" >{{item.label}}</nav-button>
  </div>
</template>
<script>
import NavButton from '@/views/home/button'
import { useRouter } from 'vue-router'

export default {
  components: { NavButton },
  props: {
    data: Array
  },
  setup () {
    const router = useRouter()
    const goto = ({ name } = {}) => {
      if (!name) router.push({ name: 'home' })
      router.push({ name })
    }
    return {
      goto
    }
  }
}
</script>
<style lang="less">
.home-nav{
  display: flex;
  flex-direction: column;
  > *{
    margin: 50px auto;
  }
}
</style>
